<template>
  <!-- html 结构 -->
  <div class="person">
    <h2>姓名：{{ person.name }}</h2>
    <h2>年龄：{{ person.age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
  </div>
</template>

<!-- 使用命令安装插件 "npm i vite-plugin-vue-setup-extend -D" -->
<!-- 修改vite.config.ts配置文件，1、导入插件import VueSetupExt from 'vite-plugin-vue-setup-extend'，2、然后追加调用VueSetupExt() -->
<!-- 在script标签上使用 name='组件名' -->
<script lang="ts" setup name="Person">
import { ref, reactive, toRefs } from "vue";
let person = reactive({
  name: "张三",
  age: 18,
});

// 将name和age使用toRefs函数转变响应式对象
let temp = toRefs(person)
let { name, age } = temp
console.log(temp)

function changeAge() {
  age.value += 1;
  console.log(age)
}
function changeName() {
  name.value += ".";
  console.log(name)
}
</script>

<style>
.person {
  background-color: aqua;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 10px;
}
button {
  margin: 0 5px;
}
</style>
